<script setup lang="ts">
import { computed } from 'vue'

interface MessageContent {
  data?: {
    text?: string;
    end?: boolean;
  };
  role?: string;
  [key: string]: any;
}

const props = defineProps<{
  content: string | MessageContent;
  sender: string;
  timestamp?: number;
}>()

const messageClass = computed(() => {
  return {
    'message-container': true,
    'user-message': props.sender === 'user',
    'system-message': props.sender === 'system',
    'assistant-message': props.sender === 'assistant'
  }
})

const senderClass = computed(() => {
  return {
    'message-sender': true,
    'user-sender': props.sender === 'user',
    'system-sender': props.sender === 'system',
    'assistant-sender': props.sender === 'assistant'
  }
})

const formattedTimestamp = computed(() => {
  if (!props.timestamp) return ''
  const date = new Date(props.timestamp)
  return date.toLocaleString()
})

const formattedContent = computed(() => {
  if (typeof props.content === 'object' && props.content !== null) {
    // If it's an object with a data property, just show the data
    if ('data' in props.content && props.content.data) {
      return props.content.data.text || props.content.data
    }
    return JSON.stringify(props.content, null, 2)
  }
  return String(props.content || '')
})

const hasNewlines = computed(() => {
  return String(formattedContent.value).includes('\n')
})
</script>

<template>
  <div :class="['message-wrapper', `message-${props.sender || 'assistant'}`]">
    <div :class="messageClass">
      <div :class="senderClass">
        {{ props.sender }}
        <span v-if="props.timestamp" class="timestamp">{{ formattedTimestamp }}</span>
      </div>
      <div class="message-content">
        <pre v-if="hasNewlines">{{ formattedContent }}</pre>
        <span v-else>{{ formattedContent }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.message-wrapper {
  width: 100%;
  display: flex;
  margin: 8px 0;
}

.message-user {
  justify-content: flex-end;

  .message-sender {
    text-align: left;
  }
}

.message-assistant {
  justify-content: flex-start;

  .message-sender {
    text-align: left;
  }
}

.message-system {
  justify-content: center;

  .message-sender {
    text-align: center;
  }
}

.user-message {
  background-color: #007AFF;
  color: white;
  border-top-right-radius: 4px;
}
.assistant-message {
  // background-color: #E9ECEF;
  // color: #212529;
    background-color: #007AFF;
  color: white;
  border-top-left-radius: 4px;
}
.system-message {
  background-color: #F8F9FA;
  color: #495057;
  border-radius: 12px;
  text-align: center;
  font-style: italic;
}

.message-container {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 12px;
  position: relative;

}

.sender {
  font-size: 0.8em;
  margin-bottom: 4px;
  opacity: 0.8;
}

.timestamp {
  font-size: 0.8em;
  margin-left: 8px;
  opacity: 0.7;
}

.message-content {
  word-break: break-word;
}

.message-content pre {
  white-space: pre-wrap;
  margin: 0;
}

.message-system .message-content {
  text-align: center;
}
</style>